<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>乐淘 - 后台管理系统首页</title>
    <!--bootstrap  原生样式-->
    <link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
    <!--字体图标-->
    <link rel="stylesheet" href="assets/font-awesome/css/font-awesome.css">
    <!--加载进度条-->
    <link rel="stylesheet" href="assets/nprogress/nprogress.css">
    <!--首页样式-->
    <link rel="stylesheet" href="less/index.css">
    <!--
        需要使用到table 插件，table 样式
    -->
    <link rel="stylesheet" href="less/bootstrap-table.css">
    <!--jQuery 插件.-->
    <script src="assets/jquery/jquery.min.js"></script>
    <style>
        .input_style_file_upload {
            padding: 4px 10px;
            height: 20px;
            line-height: 20px;
            position: relative;
            cursor: pointer;
            color: #888;
            background: #fafafa;
            border: 1px solid #ddd;
            border-radius: 4px;
            overflow: hidden;
            display: inline-block;
            display: inline;
            zoom: 1
        }

        .input_style_file_upload  input {
            position: absolute;
            font-size: 100px;
            right: 0;
            top: 0;
            opacity: 0;
            filter: alpha(opacity=0);
            cursor: pointer
        }

        .input_style_file_upload:hover {
            color: #444;
            background: #eee;
            border-color: #ccc;
            text-decoration: none
        }
    </style>
    <script>
        /*检测用户是否已经登录*/
        $.ajax({
            url:"/employee/checkRootLogin",
            type:"get",
            success:function(data){
                // console.log(data);
                if(data.error==400){
                    //说明用户未登录
                    window.location.href="employee/login.html";
                }
            }
        })
    </script>
</head>
<body>
<!-- 侧边栏 -->
<div class="aside">

    <!-- 个人资料 -->
    <div class="profile">
        <!-- 头像 -->
        <div class="avatar img-circle">
            <img src="images/my_logo.jpg">
        </div>
        <h4>张学友</h4>
    </div>
    <!-- 导航菜单 -->
    <div class="navs">
        <ul class="list-unstyled">
            <li><a href="index.html"><i class="fa fa-user"></i> 用户管理</a></li>
            <li>
                <a href="javascript:;"><i class="fa fa-bars"></i>分类管理 <i class="fa fa-angle-right"></i></a>
                <ul class="list-unstyled" style="display:block">
                    <li><a href="categoryFirst.html">一级分类管理</a></li>
                    <li class="active"><a href="categorySecond.html">二级分类管理</a></li>
                </ul>
            </li>
            <li><a href="productList.html"><i class="fa fa-product-hunt"></i>商品管理</a></li>
        </ul>
    </div>
</div>
<!-- 主体 -->
<div class="main">
    <div class="container-fluid">
        <div class="header">
            <nav class="navbar navbar-custom">
                <div class="navbar-header">
                    <a href="javascript:;" class="navbar-brand">
                        <i class="fa fa-navicon"></i>
                    </a>
                </div>
                <ul class="nav navbar-nav navbar-right">
                    <li>
                        <a href="javascript:;" class="login_out_bot" data-toggle="modal" data-target=".bs-example-modal-sm">
                            <i class="fa fa-sign-out"></i> 退出
                        </a>
                    </li>
                </ul>
            </nav>
        </div>


        <!--
         这个区域指的是
         右边的部分，这部分我要显示用户信息.
        -->
        <div class="body teacher-profile">
            <div class="profile">
                <div class="chart">
                    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">添加品牌</button>
                    <br><br>
                    <div id="main" >
                        <table id="categoryId"></table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" id="closeWindowId" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">添加分类</h4>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                       请选择分类: <!-- Single button -->
                        <div class="btn-group">
                            <button type="button" id="button_dropdownId" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                               &nbsp;&nbsp; &nbsp; &nbsp;  <span class="caret"></span>


                            </button>
                            <ul class="dropdown-menu" id="categoryMenu">
                                <!--这个里面的数据 li 的数据，必须要去查询
                                以及分类，然后显示在这个位置。
                                -->
                                <!--<li><a href="#">Action</a></li>
                                <li><a href="#">Another action</a></li>
                                <li><a href="#">Something else here</a></li>
                                <li role="separator" class="divider"></li>
                                <li><a href="#">Separated link</a></li>-->
                            </ul>
                        </div>

                        <br><br>
                        <div class="form-group">
                            <input type="text" class="form-control" id="brandName" placeholder="请输入品牌名称">
                        </div>
                        <div class="form-group">
                            <a href="javascript:;" class="input_style_file_upload">
                                请选择上传文件
                                <input id="fileupload"  class="btn btn-default" accept="image/jpeg" type="file" name="pic1" data-url="/category/addSecondCategoryPic" >
                            </a>
                        </div>
                        <img id="imageViewId"   style="width: 100px;height: 100px;">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn_closeId btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary brandSave">保存</button>
                </div>
            </div>
        </div>
    </div>

</div>
<!--bootstrap 核心文件-->
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<!--加载绿色进度条-->
<script src="assets/nprogress/nprogress.js"></script>
<!--加载绿色进度条的使用-->
<script src="js/common.js"></script>
<!--table 插件的核心文件-->
<script src="js/bootstrap-table.js"></script>
<!--国际化文件，中文.-->
<script src="js/bootstrap-table-zh-CN.js"></script>
<!--
     把分类的数据渲染到categoryId 这里
-->
<!--导入jQuery 文件上传的需要依赖的文件  fileupload -->
    <!--文件上传所需要的文件.-->
<script src="assets/jquery-fileupload/jquery.ui.widget.js"></script>
<script src="assets/jquery-fileupload/jquery.iframe-transport.js"></script>
<script src="assets/jquery-fileupload/jquery.fileupload.js"></script>
<script>
    $(function(){
        var categoryId="";
        var brandLogo="";
        /*
            文件上传.
        *   调用jQuery 的fileupload 的方法，这个肯定是一个插件方法.
        *   就会把图片传递到指定的地址.
        *
        * */
        $('#fileupload').fileupload({
            dataType: 'json',
            //后台处理了之后会给我一个响应，响应的是 图片的地址
            done: function (e, data) {
                brandLogo= data._response.result.picAddr;
                var imgUrl= data._response.result.picAddr;
                $("#imageViewId").attr("src",imgUrl);
            }
        });

        /*去获取分类的数据，渲染到页面上面.*/
        $.ajax({
             url:"/category/queryTopCategoryPaging",
             type:"get",
             data:{
                 page:1,
                 pageSize:30
             },
             success:function(data){
                var rows=data.rows;
                for(var i=0;i<rows.length;i++){
                    //组装成li 元素，往
                    //console.log(rows[i].categoryName);
                    //这句代码是遍历所有的分类.
                    var li= '<li id="'+rows[i].id+'"><a href="#">'+rows[i].categoryName+'</a></li>'
                    $("#categoryMenu").append(li);
                }
             }
        });

        //使用的是事件委派.
        $("#categoryMenu").on("click","li",function(){

                 categoryId=this.id;

                var categoryName=$(this).children().text();
                //添加之前，进行清除.
                 $("#button_dropdownId").html('<span class="caret"></span>');
                 $("#button_dropdownId").prepend(categoryName);
        })



        //保存这个商品的数据.
        $(".brandSave").on("click",function(){
                //brandName  categoryId picAddr  hot

                //获取品牌名称.
                var brandName=$("#brandName").val();

                //想办法获取到用户选中的分类的id
                var cId=categoryId;
                var hot=1;
                //发送ajax 请求，
                $.ajax({
                    type:"post",
                    url:"/category/addSecondCategory",
                    data:{
                        brandName:brandName,
                        categoryId:cId,
                        hot:hot,
                        brandLogo:brandLogo
                    },
                    success:function(data){
                       if(data.success){
                            $(".btn_closeId").click();
                            $("#categoryId").bootstrapTable("refresh");
                       }
                    }
                })








        });
        $("#categoryId").bootstrapTable({
            // table 定义有多少列
            url: '/category/querySecondCategoryPaging',
            striped: true,
            cache: false,
            pagination: true,
            sortable: false,
            //是否值允许选择单行
            pageList:[10],
            sidePagination: "server",
            //在给/user/queryUser 发送请求之前会调用 这个方法.
            queryParams:function(params){
                //在这个方法里面可以设置一些参数数据给服务器
                params.page=params.offset/10+1;
                params.pageSize=10;
                return params;
            },
            height: 500,                        //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
            uniqueId: "ID",                     //每一行的唯一标识，一般为主键列
            cardView: false,                    //是否显示详细视图
            detailView: false,
            singleSelect:true,
            columns: [{
                checkbox: true
            },{
                field: 'id',
                title: '品牌编号'
            }, {
                field: 'brandName',
                title: '品牌名称'
            },{
                field: 'brandLogo',
                title: '品牌logo'
            },{
                field: 'categoryName',
                title: '所属分类'
            }
            ],
            rowStyle:function(row,index){
                console.log(row);
                row.brandLogo="<img src='"+row.brandLogo+"' style='width:100px;height:100px;'>"
                return row;
            }
    });
    });
</script>


</body>
</html>